<div class="close-button igz-icon-close" data-ng-click="$ctrl.onClose()"></div>

<div class="title">
    <span>
        {{ 'functions:EDIT_PROJECT' | i18next }}
    </span>
</div>

<div class="main-content">
    <form name="editProjectForm" novalidate data-ng-keydown="$ctrl.saveProject($event)">
        <div class="field-group">
            <div class="field-label">
                {{ 'common:PROJECT_NAME' | i18next }}
            </div>
            <div class="field-input">
                <igz-validating-input-field class="nuclio-validating-input"
                                            data-is-disabled="true"
                                            data-field-type="input"
                                            data-input-name="metadata.name"
                                            data-input-value="$ctrl.data.metadata.name"
                                            data-update-data-callback="$ctrl.inputValueCallback(newData, field)"
                                            data-form-object="editProjectForm"
                                            data-validation-rules="$ctrl.validationRules.projectName">
                </igz-validating-input-field>
            </div>
        </div>
        <div class="field-group">
            <div class="field-label">
                {{ 'common:DESCRIPTION' | i18next }}
            </div>
            <div class="field-input">
                <div class="error" data-ng-show="$ctrl.isShowFieldInvalidState(editProjectForm, 'description')">
                    {{ 'common:ERROR_MSG.INVALID_INPUTS' | i18next }}
                </div>
                <igz-validating-input-field class="nuclio-validating-input"
                                            data-field-type="input"
                                            data-input-name="spec.description"
                                            data-input-value="$ctrl.data.spec.description"
                                            data-update-data-callback="$ctrl.inputValueCallback(newData, field)"
                                            data-form-object="editProjectForm"
                                            data-placeholder-text="{{ 'common:DESCRIPTION' | i18next }}...">
                </igz-validating-input-field>
            </div>
        </div>
    </form>
</div>

<div class="buttons">
    <button class="ncl-secondary-button igz-button-just-text"
            data-test-id="projects.edit-project_cancel.button"
            tabindex="0"
            data-ng-click="$ctrl.onClose()"
            data-ng-keydown="$ctrl.onClose($event)">
        {{ 'common:CANCEL' | i18next }}
    </button>
    <button class="ncl-primary-button igz-button-primary"
            data-test-id="projects.edit-project_apply.button"
            tabindex="0"
            data-ng-click="$ctrl.saveProject()"
            data-ng-keydown="$ctrl.saveProject($event)"
            data-ng-hide="$ctrl.isLoadingState">
        {{ 'common:APPLY' | i18next }}
    </button>
    <button class="ncl-primary-button igz-button-primary"
            data-ng-show="$ctrl.isLoadingState">
        {{ 'common:LOADING_CAPITALIZE_ELLIPSIS' | i18next }}
    </button>
</div>

<div class="error-text text-centered error-relative"
     data-ng-show="$ctrl.isServerError()">
    {{ 'common:ERROR' | i18next }}: {{$ctrl.serverError}}
</div>
